<!--
 * @Author: wangjing
 * @LastEditors: wangjing 1173862626@qq.com
 * @Date: 2025-06-23 17:02:31
 * @LastEditTime: 2025-06-23 14:55:59
 * @Description: 道路查看规划范围
-->
<template>
  <van-button
    type="primary"
    size="small"
    :loading="loading"
    @click="detailsRow()"
    style="width: 100%;"
  >
    查看路段
  </van-button>

  <!-- 范围划定弹窗 -->
  <MapScopeModal
    ref="mapScopeModalRef"
    v-bind="scopeParams"
    @close-modal="handleCloseModal"
    @transfer-scope-val="handleScopeVal"
  />
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import MapScopeModal from './mapScopeModal.vue'
const props = defineProps({
  // 默认值
  detail: {
    type: Object,
    default: () => ({})
  }
})
const mapScopeModalRef = ref(null as any)
const loading = ref(false)
// 范围划定弹窗
const formStateMap = ref({
  xyName: '', // 地点（道路名）
  xyPoint: '',
  xpoint: '', // 范围经纬度
  ypoint: '',
  zoom: 0 // 地图缩放级别
})
const scopeParams = ref({
  isDetail: true,
  isOpen: false,
  faLng: 0,
  faLat: 0,
  faXpoint: [] as string[],
  faYpoint: [] as string[],
  faZoom: 0
})

const handleScopeVal = async (value: any) => {
  formStateMap.value.xpoint = value.xPoint.join(',')
  formStateMap.value.ypoint = value.yPoint.join(',')
  formStateMap.value.zoom = value.zoom
}
const handleCloseModal = (value: boolean) => {
  scopeParams.value.isOpen = value
}

const mapScopeDelineation = () => {
  scopeParams.value.isOpen = true
  scopeParams.value.faLng = +formStateMap.value.xyPoint.split(',')[0]
  scopeParams.value.faLat = +formStateMap.value.xyPoint.split(',')[1]
  scopeParams.value.faXpoint = formStateMap.value.xpoint.split(',')
  scopeParams.value.faYpoint = formStateMap.value.ypoint.split(',')
  scopeParams.value.faZoom = formStateMap.value.zoom

  nextTick(() => {
    mapScopeModalRef.value.opendialog()
  })
}
const detailsRow = () => {
  if (props.detail.roadId) {
    loading.value = true
    const roadData = JSON.parse(props.detail.roadData)
    roadData.xyName = props.detail.roadName
    formStateMap.value = {
      ...roadData
    }
    mapScopeDelineation()  
    loading.value = false
  }
}
</script>
<style lang="scss" scoped></style>
